<template>
  <div class="salary-summary-container">
    <!-- 筛选表单 -->
    <el-card class="filter-form apple-card">
      <template #header>
        <div class="card-header">
          <span>筛选条件</span>
          <el-tag v-if="hasFilter" type="success" class="apple-tag">已筛选</el-tag>
        </div>
      </template>
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="月份">
          <el-date-picker
            v-model="queryParams.month"
            type="month"
            placeholder="选择月份"
            format="YYYY-MM"
            value-format="YYYY-MM"
            clearable
            class="apple-date-picker"
          />
        </el-form-item>
        <el-form-item label="员工">
          <el-select v-model="queryParams.nickname" placeholder="请选择员工" clearable class="apple-select">
            <el-option
              v-for="item in employeeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="薪资范围">
          <el-input-number 
            v-model="queryParams.min_salary" 
            :min="0" 
            placeholder="最小值" 
            class="small-number-input apple-input-number"
          />
          <span class="range-separator">至</span>
          <el-input-number 
            v-model="queryParams.max_salary" 
            :min="0" 
            placeholder="最大值" 
            class="small-number-input apple-input-number"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery" :loading="loading" class="apple-button primary-button">查询</el-button>
          <el-button @click="resetQuery" class="apple-button">重置</el-button>
          <el-button type="success" @click="handleExport" :loading="exportLoading" class="apple-button success-button">导出</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 薪资数据表格 -->
    <el-card class="salary-table apple-card">
      <template #header>
        <div class="card-header">
          <span>薪资数据</span>
        </div>
      </template>
      <el-table
        v-loading="loading"
        :data="salaryList"
        border
        style="width: 100%"
        @row-click="handleRowClick"
        class="apple-table"
      >
        <el-table-column prop="month" label="月份" min-width="120" />
        <el-table-column prop="nickname" label="昵称" min-width="100" />
        <el-table-column prop="hourly_wage" label="时薪(元)" min-width="100">
          <template #default="scope">
            {{ scope.row.hourly_wage.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="commission" label="提成(元)" min-width="100">
          <template #default="scope">
            {{ scope.row.commission.toFixed(2) }}
          </template>
        </el-table-column>
        <el-table-column prop="total_salary" label="总薪资(元)" min-width="120">
          <template #default="scope">
            <span class="total-salary">{{ scope.row.total_salary.toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="work_hours" label="工作时长(小时)" min-width="130" />
        <el-table-column prop="order_count" label="订单数量" min-width="100" />
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button
              size="small"
              type="primary"
              @click.stop="showDetail(scope.row)"
              class="apple-link-button"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="queryParams.page"
          v-model:page-size="queryParams.limit"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="apple-pagination"
        />
      </div>
    </el-card>

    <!-- 薪资分布图表 -->
    <el-card class="salary-chart apple-card">
      <template #header>
        <div class="card-header">
          <span>薪资分布</span>
        </div>
      </template>
      <div id="salaryChart" style="width: 100%; height: 400px" class="chart-container"></div>
    </el-card>

    <!-- 薪资详情对话框 -->
    <el-dialog v-model="dialogVisible" title="薪资详情" width="70%" custom-class="apple-dialog">
      <el-descriptions :column="2" border class="apple-descriptions">
        <el-descriptions-item label="员工" :span="1">{{ detailData.nickname }}</el-descriptions-item>
        <el-descriptions-item label="月份" :span="1">{{ detailData.month }}</el-descriptions-item>
        <el-descriptions-item label="时薪" :span="1">{{ detailData.hourly_wage?.toFixed(2) }} 元</el-descriptions-item>
        <el-descriptions-item label="提成" :span="1">{{ detailData.commission?.toFixed(2) }} 元</el-descriptions-item>
        <el-descriptions-item label="总薪资" :span="2" class="total-salary-item">{{ detailData.total_salary?.toFixed(2) }} 元</el-descriptions-item>
        <el-descriptions-item label="薪资说明" :span="2">
          <div class="salary-note">
            <i class="el-icon-info"></i> 薪资计算基于员工的"是否参与提成计算"设置，此设置可在员工管理中配置。
          </div>
        </el-descriptions-item>
      </el-descriptions>

      <template v-if="detailData.hourly_wage_details && detailData.hourly_wage_details.length > 0">
        <h3 class="detail-section-title">时薪明细</h3>
        <el-table :data="detailData.hourly_wage_details" border style="width: 100%; margin-bottom: 20px" class="apple-table">
          <el-table-column prop="date" label="日期" min-width="120" />
          <el-table-column prop="hours" label="工作时长(小时)" min-width="130" />
          <el-table-column prop="rate" label="时薪率(元/小时)" min-width="130" />
          <el-table-column prop="amount" label="金额(元)" min-width="100" />
          <el-table-column prop="remark" label="备注" min-width="150" />
        </el-table>
      </template>

      <template v-if="detailData.commission_details && detailData.commission_details.length > 0">
        <h3 class="detail-section-title">提成明细</h3>
        <el-table :data="detailData.commission_details" border style="width: 100%" class="apple-table">
          <el-table-column prop="order_id" label="订单编号" min-width="120" />
          <el-table-column prop="comm_type" label="提成类型" min-width="100" />
          <el-table-column prop="is_double" label="是否双倍" min-width="100">
            <template #default="scope">
              <el-tag type="warning" effect="plain" class="apple-tag" v-if="scope.row.is_double">是</el-tag>
              <el-tag type="info" effect="plain" class="apple-tag" v-else>否</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="金额(元)" min-width="100" />
          <el-table-column prop="date" label="日期" min-width="120" />
          <el-table-column prop="remark" label="备注" min-width="150" />
        </el-table>
      </template>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false" class="apple-button">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted, computed } from 'vue'
import { getSalaryData, getSalaryDetail, exportSalaryData, getCustomerServiceUsers } from '@/api/salary'
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'

export default {
  name: 'SalarySummary',
  setup() {
    // 查询参数
    const queryParams = reactive({
      page: 1,
      limit: 10,
      month: new Date().toISOString().substr(0, 7), // 默认当前月
      nickname: '',
      min_salary: null,
      max_salary: null
    })

    // 计算属性：是否有筛选条件
    const hasFilter = computed(() => {
      return (
        queryParams.month !== null && queryParams.month !== '' ||
        queryParams.nickname !== null && queryParams.nickname !== '' ||
        queryParams.min_salary !== null ||
        queryParams.max_salary !== null
      )
    })

    // 员工选项
    const employeeOptions = ref([])

    // 获取员工选项（客服用户列表）
    const getEmployeeOptions = async () => {
      try {
        const response = await getCustomerServiceUsers()
        console.log('获取到的员工选项:', response)
        if (response && response.data) {
          // 后端API返回的用户列表已经根据is_commission_calc字段筛选
          // 不再根据role角色判断是否参与薪资计算
          employeeOptions.value = response.data
        } else {
          employeeOptions.value = []
          console.warn('没有获取到员工选项数据')
        }
      } catch (error) {
        console.error('获取客服用户列表失败:', error)
        employeeOptions.value = []
      }
    }

    // 薪资数据列表
    const salaryList = ref([])
    const total = ref(0)
    const loading = ref(false)
    const exportLoading = ref(false)

    // 薪资详情数据
    const dialogVisible = ref(false)
    const detailData = ref({})

    // 图表实例
    let chartInstance = null

    // 获取薪资数据
    const getList = async () => {
      try {
        loading.value = true;
        
        // 准备筛选参数
        const params = { ...queryParams }
        
        const response = await getSalaryData(params);
        
        // 添加响应检查和日志
        console.log('薪资数据响应:', response);
        
        if (response && response.data) {
          salaryList.value = response.data.items || [];
          total.value = response.data.total || 0;
        } else {
          salaryList.value = [];
          total.value = 0;
          console.warn('API返回的数据格式不正确');
        }
        
        // 更新图表
        initChart();
      } catch (error) {
        console.error('获取薪资数据失败:', error);
        salaryList.value = [];
        total.value = 0;
        ElMessage.error('获取薪资数据失败，请稍后重试');
      } finally {
        loading.value = false;
      }
    }

    // 初始化图表
    const initChart = () => {
      if (chartInstance) {
        chartInstance.dispose();
      }

      const chartDom = document.getElementById('salaryChart');
      if (!chartDom) {
        console.error('找不到图表DOM元素');
        return;
      }

      // 如果没有数据，不初始化图表
      if (!salaryList.value || salaryList.value.length === 0) {
        console.warn('没有薪资数据，不显示图表');
        chartInstance = echarts.init(chartDom);
        chartInstance.setOption({
          title: {
            text: '无薪资数据',
            left: 'center',
            top: 'center',
            textStyle: {
              color: '#999',
              fontSize: 16
            }
          }
        });
        return;
      }

      chartInstance = echarts.init(chartDom);
      
      // 准备图表数据
      // 获取所有唯一的月份
      const months = [...new Set(salaryList.value.map(item => item.month))]
      
      // 按月份对数据进行分组
      const dataByMonths = {}
      months.forEach(month => {
        dataByMonths[month] = salaryList.value.filter(item => item.month === month)
      })
      
      // 准备系列数据（每个客服一个系列）
      const seriesData = []
      const nicknames = [...new Set(salaryList.value.map(item => item.nickname))]
      
      // 苹果风格的颜色方案
      const appleColors = [
        '#0071e3', // 苹果蓝色
        '#34c759', // 苹果绿色
        '#ff9500', // 苹果橙色
        '#ff3b30', // 苹果红色
        '#5e5ce6', // 苹果紫色
        '#ff2d55', // 苹果粉色
        '#00c7be', // 苹果青色
        '#ffd60a'  // 苹果黄色
      ];
      
      nicknames.forEach((nickname, index) => {
        const data = months.map(month => {
          const userDataForMonth = dataByMonths[month].find(item => item.nickname === nickname)
          // 只返回总薪资
          return userDataForMonth ? userDataForMonth.total_salary : 0
        })
        
        seriesData.push({
          name: nickname,
          type: 'bar',
          data: data,
          label: {
            show: true,
            position: 'right',
            formatter: '{c} 元',
            fontSize: 12,
            fontWeight: 500,
            color: '#333'
          },
          itemStyle: {
            color: appleColors[index % appleColors.length],
            borderRadius: [0, 4, 4, 0]
          },
          emphasis: {
            itemStyle: {
              color: appleColors[index % appleColors.length],
              opacity: 0.8,
              borderRadius: [0, 4, 4, 0]
            }
          },
          barWidth: '60%',
          barCategoryGap: '20%'
        })
      })

      // 图表配置 - 横向柱状图，苹果风格
      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(0, 113, 227, 0.05)'
            }
          },
          formatter: function(params) {
            // 自定义提示框内容
            let res = `<div style="font-weight:bold;margin-bottom:5px">${params[0].name}</div>`
            params.forEach(param => {
              const color = param.color;
              res += `<div style="display:flex;align-items:center;margin:5px 0">
                <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${color};margin-right:8px"></span>
                <span style="flex:1">${param.seriesName}: </span>
                <span style="font-weight:bold;margin-left:8px">${param.value.toFixed(2)} 元</span>
              </div>`
            })
            return res
          },
          className: 'echarts-tooltip',
          extraCssText: 'box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border-radius: 8px; padding: 10px 14px;'
        },
        legend: {
          data: nicknames,
          icon: 'circle',
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 20,
          textStyle: {
            color: '#333',
            fontSize: 12
          },
          padding: [0, 0, 10, 0]
        },
        grid: {
          left: '3%',
          right: '12%',  // 增加右侧空间以显示标签
          bottom: '3%',
          top: '50px',
          containLabel: true
        },
        xAxis: {  // 这里是x轴，表示薪资值
            type: 'value',
          name: '薪资（元）',
          nameTextStyle: {
            color: '#555',
            fontSize: 12,
            padding: [0, 0, 0, 10]
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0',
              type: 'dashed'
            }
          },
          axisLabel: {
            color: '#666',
            fontSize: 12
          }
        },
        yAxis: {  // 这里是y轴，表示月份
          type: 'category',
          data: months,
          axisLabel: {
            rotate: 0,
            color: '#333',
            fontSize: 12,
            fontWeight: 500
          },
          axisLine: {
            lineStyle: {
              color: '#f0f0f0'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: seriesData
      }

      chartInstance.setOption(option)
      
      // 监听窗口大小变化，调整图表尺寸
      window.addEventListener('resize', () => {
        chartInstance.resize()
      })
    }

    // 查询按钮点击事件
    const handleQuery = () => {
      queryParams.page = 1
      getList()
    }

    // 重置按钮点击事件
    const resetQuery = () => {
      // 重置查询条件
      queryParams.month = new Date().toISOString().substr(0, 7)
      queryParams.nickname = ''
      queryParams.min_salary = null
      queryParams.max_salary = null
      queryParams.page = 1
      // 重新查询
      getList()
    }

    // 导出薪资数据
    const handleExport = async () => {
      try {
        exportLoading.value = true
        
        const params = { ...queryParams }
        delete params.page
        delete params.limit
        
        const response = await exportSalaryData(params)
        
        // 下载文件
        const blob = new Blob([response], { type: 'application/vnd.ms-excel' })
        const link = document.createElement('a')
        const filename = `薪资数据${queryParams.month ? '_' + queryParams.month : ''}.xlsx`
        
        link.href = URL.createObjectURL(blob)
        link.download = filename
        link.click()
        
        URL.revokeObjectURL(link.href)
        
        ElMessage.success('导出成功')
      } catch (error) {
        console.error('导出薪资数据失败:', error)
        ElMessage.error('导出薪资数据失败，请稍后重试')
      } finally {
        exportLoading.value = false
      }
    }

    // 表格行点击事件
    const handleRowClick = (row) => {
      showDetail(row)
    }

    // 获取薪资详情
    const showDetail = async (row) => {
      try {
        const params = {
          month: row.month,
          nickname: row.nickname
        }
        
        const response = await getSalaryDetail(params)
        
        if (response && response.data) {
          detailData.value = response.data
          dialogVisible.value = true
        } else {
          ElMessage.warning('获取薪资详情失败')
        }
      } catch (error) {
        console.error('获取薪资详情失败:', error)
        ElMessage.error('获取薪资详情失败，请稍后重试')
      }
    }

    // 分页大小改变事件
    const handleSizeChange = (val) => {
      queryParams.limit = val
      getList()
    }

    // 当前页改变事件
    const handleCurrentChange = (val) => {
      queryParams.page = val
      getList()
    }

    // 组件挂载后执行
    onMounted(() => {
      getEmployeeOptions() // 获取客服用户列表
      getList()
    })

    return {
      // 数据
      queryParams,
      employeeOptions,
      salaryList,
      total,
      loading,
      exportLoading,
      dialogVisible,
      detailData,
      hasFilter,
      // 方法
      getList,
      handleQuery,
      resetQuery,
      handleExport,
      handleRowClick,
      showDetail,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style scoped>
.salary-summary-container {
  padding: 0 10px 10px 10px;
  max-width: 98%;
  margin: 0 auto;
}

.salary-summary-container > div {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #333;
  font-size: 16px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

/* 薪资范围筛选样式 */
.small-number-input {
  width: 120px !important;
}

.range-separator {
  margin: 0 8px;
  color: #606266;
}

/* 添加筛选标签样式 */
.filter-form .el-tag {
  margin-left: 10px;
}

/* 增强表单项之间的间距 */
.filter-form .el-form-item {
  margin-right: 20px;
}

/* 苹果风格卡片 */
.apple-card {
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.03) !important;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
  margin-bottom: 20px;
  border: none !important;
  overflow: hidden;
}

.apple-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06) !important;
}

/* 苹果风格按钮 */
.apple-button {
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: background-color 0.3s, transform 0.1s, box-shadow 0.3s !important;
  border: none !important;
  padding: 10px 16px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

.apple-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
}

.apple-button:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.primary-button {
  background-color: #0071e3 !important;
  color: white !important;
}

.primary-button:hover {
  background-color: #0077ed !important;
}

.success-button {
  background-color: #34c759 !important;
  color: white !important;
}

.success-button:hover {
  background-color: #30d158 !important;
}

/* 苹果风格表格 */
.apple-table {
  border-radius: 8px !important;
  overflow: hidden !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.apple-table :deep(.el-table__header-wrapper) {
  background-color: #f5f7fa !important;
}

.apple-table :deep(th.el-table__cell) {
  background-color: #f5f7fa !important;
  font-weight: 600 !important;
  color: #333 !important;
  padding: 12px 0 !important;
}

.apple-table :deep(.el-table__row:hover) td {
  background-color: #f5f9fc !important;
}

/* 表格行交替颜色 */
.apple-table :deep(.el-table__row:nth-child(odd)) {
  background-color: #fafbfc;
}

/* 链接按钮样式 */
.apple-link-button {
  font-weight: 500 !important;
  color: #0071e3 !important;
  border-color: #0071e3 !important;
  border-radius: 6px !important;
  transition: all 0.3s !important;
}

.apple-link-button:hover {
  background-color: #f0f7ff !important;
  color: #0077ed !important;
}

/* 添加总薪资强调样式 */
.total-salary {
  font-weight: 600;
  color: #0071e3;
}

/* 苹果风格标签 */
:deep(.apple-tag) {
  border-radius: 12px !important;
  padding: 2px 10px !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
}

/* 苹果风格数字输入框 */
.apple-input-number {
  border-radius: 8px !important;
}

.apple-input-number :deep(.el-input__wrapper) {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  padding: 4px 12px !important;
  transition: box-shadow 0.3s ease !important;
  border-radius: 8px !important;
}

.apple-input-number :deep(.el-input__wrapper:hover) {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.apple-input-number :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.3) !important;
}

/* 苹果风格日期选择器 */
.apple-date-picker :deep(.el-input__wrapper) {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  padding: 4px 12px !important;
  transition: box-shadow 0.3s ease !important;
  border-radius: 8px !important;
}

.apple-date-picker :deep(.el-input__wrapper:hover) {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.apple-date-picker :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.3) !important;
}

/* 苹果风格选择器 */
.apple-select :deep(.el-input__wrapper) {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  padding: 4px 12px !important;
  transition: box-shadow 0.3s ease !important;
  border-radius: 8px !important;
}

.apple-select :deep(.el-input__wrapper:hover) {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

.apple-select :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.3) !important;
}

/* 分页控件样式 */
.apple-pagination {
  margin-top: 16px;
  padding: 8px 0;
}

.apple-pagination :deep(.el-pagination__sizes .el-input .el-input__wrapper) {
  border-radius: 8px !important;
}

.apple-pagination :deep(.el-pager li) {
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  margin: 0 3px !important;
}

.apple-pagination :deep(.el-pager li.is-active) {
  background-color: #0071e3 !important;
  color: white !important;
  font-weight: 600 !important;
}

.apple-pagination :deep(.btn-prev),
.apple-pagination :deep(.btn-next) {
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

/* 图表容器 */
.chart-container {
  border-radius: 8px;
  padding: 16px;
  background-color: #fafbfc;
}

/* 详情对话框内容样式 */
.detail-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 24px 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

/* 薪资说明样式 */
.salary-note {
  font-size: 13px;
  color: #606266;
  background-color: #f0f7ff;
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid #0071e3;
}

/* 苹果风格描述列表 */
.apple-descriptions :deep(.el-descriptions__header) {
  margin-bottom: 16px;
}

.apple-descriptions :deep(.el-descriptions__title) {
  font-weight: 600;
  color: #333;
}

.apple-descriptions :deep(.el-descriptions__label) {
  color: #555;
  font-weight: 500;
}

.apple-descriptions :deep(.el-descriptions__content) {
  color: #333;
}

.total-salary-item :deep(.el-descriptions__content) {
  font-weight: 700;
  color: #0071e3;
  font-size: 16px;
}

/* 对话框底部按钮 */
.dialog-footer {
  text-align: right;
  margin-top: 20px;
}

/* 时间字段显示优化 */
.el-table .cell {
  line-height: 1.5;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 表格卡片内边距优化 */
.salary-table :deep(.el-card__body) {
  padding: 16px;
}

.filter-form :deep(.el-card__body) {
  padding: 16px;
}

.salary-chart :deep(.el-card__body) {
  padding: 16px;
}

.apple-dialog {
  width: 80% !important;  /* 使用!important确保优先级 */
}

/* 将对话框组件宽度也调整 */
:deep(.el-dialog) {
  max-width: 90%;  /* 设置最大宽度 */
  width: fit-content;
}
</style>

<!-- 添加全局样式 -->
<style>
/* 苹果风格对话框 */
.apple-dialog {
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.08) !important;
}

.apple-dialog .el-dialog__header {
  padding: 16px 20px !important;
  margin: 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
  background-color: #f5f7fa !important;
}

.apple-dialog .el-dialog__title {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #333 !important;
}

.apple-dialog .el-dialog__body {
  padding: 20px !important;
}

.apple-dialog .el-dialog__footer {
  padding: 12px 20px 16px !important;
  border-top: 1px solid #f0f0f0 !important;
}

.apple-dialog .el-dialog__headerbtn {
  top: 16px !important;
  right: 16px !important;
}

.apple-dialog .el-dialog__headerbtn:hover .el-dialog__close {
  color: #0071e3 !important;
}

/* 日期面板样式 */
.el-picker-panel {
  border-radius: 12px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
  border: none !important;
  overflow: hidden !important;
}

.el-date-picker__header {
  margin: 8px 12px !important;
}

.el-date-picker__header-label {
  font-weight: 600 !important;
  color: #333 !important;
}

.el-date-table td.current:not(.disabled) span {
  background-color: #0071e3 !important;
  color: white !important;
  border-radius: 50% !important;
}

.el-date-table td.today span {
  color: #0071e3 !important;
  font-weight: bold !important;
}

.el-date-table td:hover span {
  background-color: #e6f1fc !important;
  border-radius: 50% !important;
}

/* 下拉菜单样式 */
.el-select-dropdown {
  border-radius: 12px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
  border: none !important;
  overflow: hidden !important;
}

.el-select-dropdown__item.selected {
  color: #0071e3 !important;
  font-weight: 600 !important;
}

.el-select-dropdown__item.hover, 
.el-select-dropdown__item:hover {
  background-color: #f0f7ff !important;
}

/* 消息提示框样式 */
.el-message {
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 12px 16px !important;
}

.el-message__content {
  font-size: 14px !important;
}

/* ECharts 图表样式 */
.echarts-tooltip {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 8px 12px !important;
  color: #333 !important;
  border: none !important;
}
</style> 